<template>
  <div>
    <mt-header fixed>
      <span slot="left">
        <mt-button icon="back" onclick="javascript:history.go(-1)"></mt-button>
      </span>
      <span slot="right" @click="col">
        <img v-if="collect" class="w-20" src="../assets/collected.png" alt="" />
        <img v-else class="w-20" src="../assets/collect.png" alt="" />
      </span>
    </mt-header>
    <!-- 导航导航结束 -->
    <!-- 标题名 -->
    <div class="title">
      <h1>{{ item.subject }}</h1>
      <img :src="item.image" />
      <div class="mingxi">
        <!-- 食材介绍 -->
        <h3>食材明细</h3>
      </div>
      <fieldset>
        <legend>主料</legend>
        <ul>
          <li>
            <span>{{ item.main }}</span>
          </li>
        </ul>
      </fieldset>
      <fieldset>
        <legend>辅料</legend>
        <ul>
          <li>
            <span>{{ item.assist }}</span>
          </li>
        </ul>
      </fieldset>
      <div class="mingxi">
        <!-- 食物的做法 -->
        <h3>{{ item.subject }}的做法步骤</h3>
      </div>
      <div class="do">
        <ul>
          <li>
            <div class="word">
              {{ item.content }}
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!-- 添加评论 -->
    <!-- <div class="discuss">
      <ul>
        <li>
          <img src="../assets/pinglun.png" alt="" class="discuss_img">
          <p>添加评论</p>         
        </li>
      </ul>
      
    </div> -->
    <!-- 评论 -->
    <!-- <div>
          <textarea cols="50" rows="5" placeholder="登录后参与评论，发表评论"></textarea>
          <input type="text">
          <button class="discuss_btn" >发表评论</button>
        </div>
       <div class="author-info">
              <img :src="item.avatar" class="author-info-avatar">
                <div class="author-info-detail">
                    <div class="author-info-nickname">{{item.nickname}}</div>
                </div>
        </div>       -->
  </div>
</template>
<style scoped>
* {
  margin: 0px 3px;
  padding: 0px;
}
.w-20 {
  width: 20px;
  display: inline-block;
  margin-bottom: 10px;
}
.mint-header {
  background-color: #e54d42;
  margin: 0px -3px;
}
h1 {
  font-size: 32px;
  margin-top: 55px;
  margin-left: 3px;
}

body {
  color: #000;
}
img {
  width: 80%;
  /* height: 140px; */
  margin-left: 35px;
  margin-top: 10px;
}
.mingxi {
  color: #ff6767;
  font-size: 20px;
  padding: 20px 0 20px 25px;
  background: rgba(0, 0, 0, 0) url(../assets/mingxi.png) no-repeat scroll left
    center;
  background-size: 22px;
  margin-bottom: 15px;
}
h3 {
  font-size: 25px;
  margin-top: 5px;
}
fieldset {
  border-radius: 10px;
  border: 1px solid #ddd;
  padding: 0 0 10px 0;
  margin: 0 0 15px 0;
}
legend {
  font-size: 18px;
  margin: 0 30px;
  padding: 0 15px;
}
fieldset ul {
  width: 100%;
  list-style: none;
  margin: 0 auto;
  text-align: center;
  /* display: flex; */
  /* flex-flow: row wrap; */
  justify-content: space-around;
  padding: 20px 0;
}
li {
  margin: 0 5px;
  line-height: 27px;
}
span {
  display: block;
  font-size: 20px;
}
a {
  color: #333;
  text-decoration: none;
  font-size: 22px;
  overflow: hidden;
  text-align: center;
  margin: 0 auto;
}
.word {
  margin-top: -27px;
  font-size: 18px;
  margin-bottom: 30px;
  line-height: 30px;
}
.author-info {
  display: flex;
  align-items: center;
  margin-left: -15px;
  /* margin-bottom: 5px; */
  /* padding: 8px 10px; */
  background: #fff;
  box-shadow: 0 1px 3px rgba(26, 26, 26, 0.1);
}
.author-info-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.author-info-detail {
  margin-left: 15px;
}
.author-info-nickname {
  font-size: 15px;
  margin-bottom: 6px;
}
.author-info-badge {
  font-size: 14px;
}

.discuss ul {
  width: 100%;
  margin: 0 auto;
  text-align: center;

  display: flex;
  justify-content: space-around;
}
.discuss ul li {
  width: 65px;
  list-style: none;
}
textarea {
  resize: node;
}
input {
  width: 78%;
  height: 30px;
}
.diacuss_btn {
  width: 20%;
  height: 30px;
  background: rgb(218, 112, 74);
  border: 0;
}
</style>
<script>
export default {
  data() {
    return {
      item: {},
      contents: [],
      collect: false,
    };
  },

  mounted() {
    // 获取URL中动态参数
    // let uid=this.$store.state.user.id;
    // console.log(uid);
    //     let id = this.$route.params.id;
    //     console.log(this.id)
    //     this.axios.get('/postcomment',{
    //     params:{
    //       uid:uid,
    //       // id:id

    //     }
    // }).then((res)=>{
    //       //将服务器返回的数据赋值给变量--results(对象数组)
    //         let results = res.data.results;
    //         //通过foreach()语句对于results遍历，实现图片的动态加载
    //         results.forEach(item => {
    //           //item指组成数组的每一个成员，在本案例中也就是一个对象
    //           //如果但当前文章有缩略图则动态加载
    //           if (item.image != null) {
    //             //属性重新赋值  --  将图片动态加载后重新赋值给item的image属性
    //             this.item.avatar = require("../assets/articleimages/" +
    //           this.item.avatar);
    //           }
    //         });
    //       });
    //获取URL中动态参数
    let id = this.$route.params.id;
    //将此id发送到web服务器以获取当前文章的详细信息
    this.axios
      .get("/detail", {
        params: {
          id: id,
        },
      })
      .then((res) => {
        this.item = res.data.results;
        this.item.image = require("../assets/articleimages/" + this.item.image);
      });
    // this.dishes.push(item);
  },
  methods: {
    col() {
      if (this.$store.state.islogin == 1) {
        // 获取当前事件id;
        let menu_id = this.$route.params.id;
        let uid = this.$store.state.user.id;
        console.log(uid);
        // 添加收藏
        this.axios
          .post("/insert_col", "uid=" + uid + "&menu_id=" + menu_id)
          .then((res) => {});
        this.collect = true;
      } else {
        window.location.href = "/login";
      }
    },
    //   // 添加收藏
    //   collection() {
    //     // 获取当前事件id
    //     let menu_id = this.$route.params.id;
    //     let uid = this.$store.state.user.id;
    //     console.log(uid);
    //     // 添加收藏
    //     this.axios
    //       .post("/insert_col", "uid=" + uid + "&menu_id=" + menu_id)
    //       .then((res) => {});
    //     this.collect = true;
    //   },
  },
};
</script>